<template>
  <div>
    <div class="box">
      <img :src="images[defaultIndex]" alt="">
    </div>
    <div class="wrapper">
      <div class="wrapper-left" @click="onLeft"> < </div>
      <div class="wrapper-center">
        <img v-for="(item,index) in images" 
        :key="index" :src="item" 
        ref="imagess" 
        :class="{'.active':defaultIndex==index}"
        @mouseenter="onMouseenter(index)"
        alt="">
      </div>
      <div class="wrapper-right" @click="onRight"> > </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      images:[
        "http://localhost:8080/img/2.jpg",
        "http://localhost:8080/img/3.jpg",
        "http://localhost:8080/img/4.jpg",
        "http://localhost:8080/img/5.jpg",
        "http://localhost:8080/img/6.jpg",
        "http://localhost:8080/img/7.jpg",
        "http://localhost:8080/img/8.jpg",
        "http://localhost:8080/img/9.jpg",
        "http://localhost:8080/img/15.jpg",
        "http://localhost:8080/img/16.jpg",
      ],
      defaultIndex:0,

      obj:{}

    }
  },
  created(){
    let data = this.$route.query.item
    // console.log(data)
    this.obj = data
    console.log(this.obj)
  },
  methods:{
    onRight(){
      this.defaultIndex +=3
      var image = this.$refs.imagess
      if(this.defaultIndex >= this.images.length){
        this.defaultIndex = this.images.length-1
      }
      image[this.defaultIndex].scrollIntoView({
        behavior: "smooth",
        inline: "start",
      });
    },
    onLeft(){
      this.defaultIndex -=3
      var image = this.$refs.imagess
      if(this.defaultIndex <=0){
        this.defaultIndex = 0
      }
      image[this.defaultIndex].scrollIntoView({
        behavior: "smooth",
        inline: "end",
      });
    },
    onMouseenter(index){
      console.log(index)
      this.defaultIndex = index
    }
  }

}
</script>

<style scoped>
.box{
  width: 400px;
  height: 400px;
  border: 1px solid black;
}
.box img{
  width: 100%;
}
.wrapper{
  width: 400px;
  height: 100px;
  border: 1px solid black;
  display: flex;
}
.wrapper-left,.wrapper-right{
  width: 15%;
  height: 100px;
  background: burlywood;
  font-size: 24px;
  text-align: center;
  line-height: 100px;
}
.wrapper-center{
  width: 80%;
  display: flex;
  overflow: scroll;
  
}
.active{
  border: 1px solid red;
}
::-webkit-scrollbar {display:none}
.wrapper-center img{
width: 33.3%;
}
</style>